<template>
  <view>
    <uni-section title="事件" type="line"></uni-section>
    <uni-list>
      <uni-list-item
        title="事件标题"
        note="2021-01-01"
        showArrow
        thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
        thumb-size="lg"
      >
        <template slot="footer">
          <uni-badge text="2" type="error" />
        </template>
      </uni-list-item>
    </uni-list>

    <uni-section title="任务" type="line"></uni-section>
    <uni-list>
      <uni-list-item>
        <view slot="header">
          <view class="icon-left">任务类型</view>
        </view>
        <view slot="body">
          <view>请执行资源调度任务，并反馈</view>
          <view>0523广州市广谱区环城路洪涝灾害</view>
          <view>开始时间：2021-01-01</view>
          <view>完成时间：2021-01-03</view>
        </view>
        <view slot="footer">
          <text class="text-success">已完成</text>
        </view>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      extraIcon: {
        color: "#4cd964",
        size: "22",
        type: "gear-filled",
      },
    };
  },
  methods: {
    onClick(e) {
      console.log("执行click事件", e.data);
      uni.showToast({
        title: "点击反馈",
      });
    },
    switchChange(e) {
      uni.showToast({
        title: "change:" + e.value,
        icon: "none",
      });
    },
  },
};
</script>

<style lng="scss" scoped>
.icon-left {
  background-color: rgba(45, 118, 253, 1);
  color: #fff;
  width: 80rpx;
  height: 80rpx;
  text-align: center;
  border-radius: 10rpx;
  padding: 10rpx;
}
.text-success {
  color: #008000;
}

</style>